<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel='stylesheet' href='/stylesheets/bootstrap.css' />
    <script src="/javascripts/vue.js"></script>
    <script src="/javascripts/vue-resource.js"></script>
  </head>
  <body>
    <div class="banner">健康号小程序后台</div>
    <div  id="app">
      <div class="main">
        <input class="form-control" v-model="title" placeholder="标题"/>
        <input class="form-control" v-model="src" placeholder="图片链接"/>
        <input class="form-control" v-model="desc" placeholder="描述"/>
        <textarea class="form-control" v-model="content" row="20" col="20" placeholder="文章"></textarea>
        <button class="btn btn-default" v-on:click="submit">提交</button>
      </div>
    </div>
  </body>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        title:'',
        src:'',
        desc:'',
        content:''
      },
      methods:{
        submit:function(){
          if(this.title==''){
            alert("题目不可为空");
            return
          }
          if(this.src==''){
            alert("图片连接不可为空");
            return
          }
          if(this.desc==''){
            alert("描述不可为空");
            return
          }
          if(this.content==''){
            alert("正文不可为空");
            return
          }
          var info={};
          info.title = this.title;
          info.src = this.src;
          info.description = this.desc;
          info.content = this.content;
          Vue.http.post('/api/add_info_api',info).then(response => {
            if(response.body=='success'){
              alert("添加成功");
            }
          }, response => {
            alert("添加失败")
          });
        }
      }
    })
  </script>
</html
